// 通过$符号来定义常量宏，方便维护和修改
$color-blue: blue;
$width-medium: 200px;
$flag: 1;
.box {
  background-color: $color-blue;
  width: $width-medium * 2;
}

// if else分支语句
// 任何非false值都会解析成true
// and or not 表示与或非
@if ($flag ==1 or true) {
  .exp {
    width: 100px;
  }
} @else if() {
} @else {
}

// 循环语句，三种情形
// 1. @for $var from <start> through <end> 以数字为依据循环，包含end
@for $i from 1 through 3 {
  div :nth-child(#{$i}) {
    width: 1px;
  }
}

// 2. @for $var from <start> to <end> 以数字为依据循环，不包含end
@for $i from 1 to 3 {
  div :nth-child(#{$i}) {
    width: 1px;
  }
}

// 3. each循环遍历列表或数组
$colors: red blue green yellow;
@each $color in $colors {
  li {
    $id: index($colors, $color);
    width: $id*$width-medium;
  }
}

// mixin 封装函数或代码块，方便复用，降低重复率
// 通过冒号添加默认值
@mixin setWidth ($a:30px){
    width: $a;
}

div{
    // 通过include调用
    @include setWidth();
}

// 嵌套定义
div {
    width: 100px;
    // 此处表示div中的p的样式
    p{
        width: 50px;
    }

    // &表示父元素，在此处即为div
    body &{
        background-color: $color-blue;
    }
}

// extend继承样式
.base{
    width: 100px;
    height: 100px;
}

.one{
    @extend .base;
    width: 200px;
}

.two{
    @extend .base;
    width: 10px;
}

// 通过@import引入外部sass文件，类似引入头文件
// 相当于把test2的内容写入此处
@import "./test2.scss";
